<template>
  <div class="backgroundDiv"  align="center">
    <el-container>
      <el-header><q-a-manage-nav-bar :nickname="nickname" ></q-a-manage-nav-bar></el-header>
      <el-container>
        <el-aside width="200px" style="background-color: white">
          <q-a-manage-aside
              @allqaclickaside="allQAClickChange"
              @trashclickaside="trashClickChange">
          </q-a-manage-aside>
        </el-aside>
        <el-main>
          <div class="opBar" v-show="showAllQA">
            <operation-bar
                @sortclick="handleSort"
                @filterclick="handleFilter"
                @searchboxevent="searchBoxRefreshInfo"></operation-bar>
          </div>
          <div v-show="showAllQA">
            <el-scrollbar style="width: 90%;" height="850px" >
              <div >
                <q-a-manage-main
                    style=" margin-left: 2%"
                    :data="QAinfo"
                    :filterstatus="filterStatus"
                    @deleteqamain="deleteQARefreshData"
                    @refreshispostedmain="refreshStopPublishMain"
                    @refreshpublishmain="refreshPublishMain"
                    @duplicateQA="duplicateRefresh">
                </q-a-manage-main>
              </div>
            </el-scrollbar>

          </div>

          <div v-show="showTrashQA">
            <trash :table-info="tableInfo"></trash>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import QAManageNavBar from "@/qaManage/components/QAManageNavBar";
import QAManageAside from "@/qaManage/components/QAManageAside";
import OperationBar from "@/qaManage/components/OperationBar";
import QAManageMain from "@/qaManage/components/QAManageMain";
import Trash from "@/qaManage/components/Trash";
import axios from "axios";
import qs from "qs";
import {inject} from "vue";
export default {
  name: "QAManage",
  data() {
    return {
      nickname: null,
      QAinfo: [], // 展示
      filterStatus: {
        data: 0
      },
      activeIndex: '1',
      activeIndex2: '1',
      showAllQA: true,
      showTrashQA: false,
      tableInfo: [],
    };
  },
  components: {
    QAManageNavBar,
    QAManageAside,
    OperationBar,
    QAManageMain,
    Trash,
  },
  created() {
  },
  mounted() {
    this.nickname = localStorage.getItem('nick')
    this.getData()
    this.apiGetDeletedInfo()
    // this.handleSort(2)
  },
  methods: {
    getData() {
      let data = {
        id: localStorage.getItem('id'),
      }

      axios.post('/api/qamanage/info',qs.stringify(data)).then(res => {
        // console.log(res);
        if (res.data.code === 0) {
          this.QAinfo = res.data.data
          this.QAinfo.sort(function (a, b) {
            let x = a.createdDate.slice(0,10).replace(/-/g, "")
            let y = b.createdDate.slice(0,10).replace(/-/g, "")
            return ((x<y)?((x>y)?1:0):-1);
          })
          // console.log(this.QAinfo);
        }
        else {
          console.log('获取问卷信息err');
        }
      })
    },

    apiGetDeletedInfo() {
      let data = {
        id: localStorage.getItem('id')
      }
      axios.post('/api/qamanage/deletedqa', qs.stringify(data)).then(res => {
        // console.log(res);
        this.tableInfo = []
        for (let item of res.data.data) {
          if (item.latestPostDate !== null) {
            item.latestPostDate = item.latestPostDate.slice(0,10)
          }
          this.tableInfo.push(item)
        }
      })

      if (this.tableInfo == null) {
        console.log('获取删除的问卷信息失败');
      }
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    // 监听来自main的删除
    deleteQARefreshData (item) {
      // 发送删除
      let data = {
        qaid:item.id
      }
      axios.post('/api/qamanage/deleteqa',qs.stringify(data)).then(res => {

        if (res.data.code === 0) { // 已经删除，进行刷新
          console.log('删除问卷成功')
          item.isDeleted = true
          // this.QAinfo = []
          this.getData()
          this.apiGetDeletedInfo()
        }
        else { // 出现错误
          console.log('出现问题，删除问卷')
        }
      })
    },

    duplicateRefresh() {
      console.log('duplicate');
      this.getData()
    },

    // 监听来自aside的回收站
    trashClickChange () {
      console.log('trashclick')
      this.showAllQA = false
      this.showTrashQA = true
    },

    allQAClickChange() {
      console.log('allqaclick')
      this.showAllQA = true
      this.showTrashQA = false
    },

    // 监听排序信息
    handleSort(flag) {
      console.log(flag);
      if (flag === 1) {
        console.log('时间正序');
        this.QAinfo.sort(function (a, b) {
          let x = a.createdDate.slice(0,10).replace(/-/g, "")
          let y = b.createdDate.slice(0,10).replace(/-/g, "")
          return ((x<y)?-1:((x>y)?1:0));
        })
      }
      else if (flag === 2) {
        console.log('时间倒序');
        this.QAinfo.sort(function (a, b) {
          let x = a.createdDate.slice(0,10).replace(/-/g, "")
          let y = b.createdDate.slice(0,10).replace(/-/g, "")
          return ((x<y)?((x>y)?1:0):-1);
        })
      }
      //数量正序排序
      else if (flag === 3) {
        console.log('数量正序');
        this.QAinfo.sort(function (a, b) {
          return a.count - b.count
        })
      }
      else if (flag === 4) {
        console.log('数量倒序');
        this.QAinfo.sort(function (a, b) {
          return b.count - a.count
        })
      }
    },

    // 监听搜索框
    searchBoxRefreshInfo(text) {
      console.log('监听搜索');
      console.log(text+'fa');
      // this.$router.go(0)
      const data = {
        id: localStorage.getItem('id'),
        key: text
      }
      axios.post('api/qamanage/info', qs.stringify(data)).then(res => {
        if (res.data.code !== 0) {
          console.log('搜索问卷接口出错');
        }
        else {
          this.QAinfo = res.data.data
        }
      })
    },

    // 监听筛选框
    handleFilter(flag) {
      if (flag === 1) { // 显示已发布问卷
        this.filterStatus.data = 1
      }
      else if (flag === 2) { // 显示未发布问卷
        this.filterStatus.data = 2
      }
      else if (flag === 3) {
        this.filterStatus.data = 0
      }
    },

    // 刷新状态
    refreshStopPublishMain(qaid) {
      for (let item of this.QAinfo) {
        if (item.id === qaid) {
          item.isPosted = false
        }
      }
    },
    refreshPublishMain(qaid) {
      for (let item of this.QAinfo) {
        if (item.id === qaid) {
          item.isPosted = true
        }
      }
    },

  }
}
</script>

<style scoped>

.html {
  background-color: gray;
}

.backgroundDiv {
  width: 90%;
  margin-left: 5%;
  text-align: center;
}

.background {
  background-color: black;
}

.opBar {
  background-color: white;
  margin-right: 30px;
}
.el-header {
  background-color: white;
      /*rgba(237,237,237,0.9);*/
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 50px;
}

.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  height: 100%;
}

body > .el-container {
  margin-bottom: 40px;
}

/*.el-container:nth-child(5) .el-aside,*/
/*.el-container:nth-child(6) .el-aside {*/
/*}*/

/*.el-container:nth-child(7) .el-aside {*/
/*  line-height: 320px;*/
/*}*/

</style>